<!--
 * @Description: 弹窗模板
 * @Author: chendingfengmail@163.com
 * @Date: 2022-01-17 08:28:19
 * @LastEditTime: 2022-01-24 15:37:08
 * @LastEditors: chendingfengmail@163.com
 * @Reference: 
-->
<template>
  <el-dialog
    :title="titleName"
    width="50%"
    center
    :visible.sync="visible"
    :before-close="modalClose"
    @open="modelOpen"
    :close-on-click-modal="false"
  >
    <el-form
      :rules="viewHandleRules"
      ref="viewHandleForm"
      :model="modelData"
      :disabled="formDisabled"
      v-loading="loading"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="文本输入" :label-width="formLabelWidth" prop="textField">
            <el-input v-model="modelData.textField" autocomplete="off" maxlength="30" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="下拉选择" :label-width="formLabelWidth" prop="selectField">
            <el-select v-model="modelData.selectField" placeholder="请选择" style="width: 100%">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="时间选择" :label-width="formLabelWidth" prop="timeSelectField">
            <el-time-select
              v-model="modelData.timeSelectField"
              :picker-options="{
                start: '08:30',
                step: '00:15',
                end: '18:30',
              }"
              placeholder="选择时间"
              style="width: 100%"
            >
            </el-time-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="日期选择" :label-width="formLabelWidth" prop="dateSelectField">
            <el-date-picker
              v-model="modelData.dateSelectField"
              type="datetime"
              placeholder="选择日期时间"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="大文本框" :label-width="formLabelWidth" prop="textareaField">
            <el-input
              type="textarea"
              maxlength="120"
              :rows="3"
              v-model="modelData.textareaField"
              autocomplete="off"
              placeholder="请输入大文本信息"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="图片操作" :label-width="formLabelWidth" prop="imageField">
            <dd-file-upload
              :fileList="imageList"
              :uploadRequest="uploadImage"
              :onRemoveFile="handleRemoveFile"
              :fileLimit="1"
              :isPreview="imagesPreview"
            >
            </dd-file-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="布尔操作" :label-width="formLabelWidth" prop="booleanField">
            <el-switch v-model="modelData.booleanField" :active-value="1" :inactive-value="0" active-color="#13ce66">
            </el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="富文本框" :label-width="formLabelWidth">
          <quill-editor
			class="ql-editor"
            v-model="modelData.content"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          >
          </quill-editor>
        </el-form-item>
      </el-row>
    </el-form>
    <div slot="footer" v-show="btnVisible">
      <el-button type="primary" @click="formSubmit" :loading="loading">提 交</el-button>
    </div>
  </el-dialog>
</template>

<script>
// 富文本相关依赖
import { quillEditor } from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
  name: 'viewHandleDialog',
  components: {
    quillEditor,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    modelType: {
      type: String,
      required: true,
      default: () => {
        return 'info';
      },
    },
    modelData: {
      type: Object,
      default: () => {
        return {
          textField: '文本',
          selectField: '选项1',
          timeSelectField: '08:30',
          dateSelectField: '2022-01-17 09:14:28',
          textareaField: '大文本信息',
          imageField:
            'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
          content: `<p>富文本信息</p>`,
          booleanField: 0,
        };
      },
    },
  },
  data() {
    return {
      titleName: '详情',
      formLabelWidth: '100px',
      dialogFormVisible: false,
      formDisabled: false,
      btnVisible: true,
      loading: false,

      imagesPreview: false,
      imageList: [],
      viewHandleRules: {},

      options: [
        {
          value: '选项1',
          label: '选项1',
        },
        {
          value: '选项2',
          label: '选项1',
        },
      ],

      editorOption: {}, // 富文本配置
    };
  },
  created() {},
  mounted() {},
  computed: {
    // 富文本编辑框计算属性
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
  methods: {
    // 对话框打开
    modelOpen() {
      switch (this.modelType) {
        case 'add':
          this.modelTypeChange('添加', false, true, false);
          break;
        case 'info':
          this.modelTypeChange('详情', true, false, true);
          // 图片回显
          this.assignImage();
          break;
        case 'edit':
          this.modelTypeChange('编辑', false, true, false);
          // 图片回显
          this.assignImage();
          break;
        default:
          break;
      }
    },

    // 模式切换
    modelTypeChange(titleName, formDisabled, btnVisible, imagesPreview) {
      this.titleName = titleName;
      this.formDisabled = formDisabled;
      this.btnVisible = btnVisible;
      this.imagesPreview = imagesPreview;
    },

    // 上传图片
    uploadImage(upFormData) {
      let _this = this;
      return new Promise((resolve, reject) => {
        this.$api.file
          .fileUpload(upFormData)
          .then((res) => {
            _this.modelData.imageField = res.value;
            resolve(res);
          })
          .catch((error) => {
            reject(error);
          });
      });
    },

    // 图片回显
    assignImage() {
      let imageUrl = this.modelData.imageField;
      this.imageList = [];
      this.imageList.push({ url: imageUrl });
    },

    // 图片删除回调函数
    handleRemoveFile(file, pictureList) {},

    // 表单提交
    formSubmit() {
      this.$refs.viewHandleForm.validate((valid) => {
        if (valid) {
          switch (this.modelType) {
            case 'add':
              this.handleAdd(this.modelData);
              break;
            case 'edit':
              this.handleEdit(this.modelData);
              break;
            default:
              break;
          }
        }
      });
    },

    // 富文本相关回调
    onEditorReady(editor) {}, // 准备编辑器
    onEditorBlur(editor) {}, // 失去焦点事件
    onEditorFocus(editor) {}, // 获得焦点事件
    onEditorChange(editor) {}, // 内容改变事件

    // 新增
    handleAdd(formData) {
      this.loading = true;
      this.$api.user
        .addUser(formData)
        .then((res) => {
          this.$message.success('添加成功');
          this.loading = false;
          this.modalClose();
          this.$emit('loadList');
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 编辑
    handleEdit(formData) {
      formData.password = undefined;
      this.loading = true;
      this.$api.user
        .updateUser(formData)
        .then((res) => {
          this.$message.success('更新成功');
          this.loading = false;
          this.modalClose();
          this.$emit('loadList');
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    // 重置表单
    resetForm() {
      this.$nextTick(() => {
        this.$refs.viewHandleForm.resetFields();
      });
    },
    // 对话框关闭
    modalClose() {
      this.resetForm();
      this.$emit('update:visible', false); // 直接修改父组件的属性
    },
  },
};
</script>
<style lang="scss">
.ql-editor {
  height: 80px;
}
</style>
